<template>
  <d2-container>
    <div class="wait-task">
      <div class="title">待办</div>
      <div class="item-card__body">
        <div class="item-card">
          <div class="task-num">{{view.verify_task}}</div>
          <div class="task-name">待审核任务（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.verify_withdraw}}</div>
          <div class="task-name">待审核提现（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.complaint}}</div>
          <div class="task-name">待处理投诉（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.feed_back}}</div>
          <div class="task-name">待处理反馈（个）</div>
        </div>
      </div>
    </div>
    <div class="wait-task">
      <div class="title">数据概览</div>
      <div class="search-time">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="timestamp"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" style="margin-left: 10px" @click="search">检索</el-button>
      </div>
      <div class="item-card__body">
        <div class="item-card">
          <div class="task-num">{{view.register_user}}</div>
          <div class="task-name">注册用户（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.finish_task}}</div>
          <div class="task-name">完成任务（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.publish_task}}</div>
          <div class="task-name">发布任务（个）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.recharge_amount | moneyFilter}}</div>
          <div class="task-name">充值收入（元）</div>
        </div>
      </div>
      <div class="item-card__body">
        <div class="item-card">
          <div class="task-num">{{view.withdraw_amount | moneyFilter}}</div>
          <div class="task-name">提现支出（元）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.income_amount | moneyFilter}}</div>
          <div class="task-name">入账金额（元）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.out_amount | moneyFilter}}</div>
          <div class="task-name">出账金额（元）</div>
        </div>
        <div class="item-card">
          <div class="task-num">{{view.service_fee | moneyFilter}}</div>
          <div class="task-name">任务服务费（元）</div>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import { fetchView } from './api'

export default {
  data () {
    return {
      time: [],
      view: {
        verify_task: 0,
        verify_withdraw: 0,
        complaint: 0,
        feed_back: 0,
        register_user: 0,
        finish_task: 0,
        publish_task: 0,
        recharge_amount: 0,
        withdraw_amount: 0,
        income_amount: 0,
        out_amount: 0,
        service_fee: 0
      }
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    async search () {
      const params = {}
      if (this.time.length) {
        params.start_time = this.time[0] / 1000
        params.end_time = this.time[1] / 1000
      }
      const { data } = await fetchView(params)
      this.view = data
    }
  }
}
</script>

<style lang="scss" scoped>
.d2-container-full__body {
  padding: 60px 50px;
}
.wait-task {
  display: flex;
  flex-direction: column;
  line-height: 25px;
  .title {
    margin: 20px 0;
    text-align: center;
  }
  .search-time {
    margin-bottom: 20px;
    margin-left: 60px;
  }
  .item-card__body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .item-card {
      display: flex;
      box-sizing: border-box;
      padding: 25px;
      flex-direction: column;
      align-items: center;
      width: 250px;
      height: 100px;
      text-align: center;
    }
  }
}
</style>
